import React from 'react';
import styles from './RoleList.css';
import PropTypes from 'prop-types';
import {Button, Table, Card} from 'antd';

function RoleList({rolelist}) {
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id'
    }, {
      title: '角色名',
      dataIndex: 'name',
      key: 'name'
    }, {
      title: '操作',
      dataIndex: '',
      key: 'operation',
      render: (text, record, index) => {
        return (
          <div>
            <Button onClick={() => onClick(record.id)} type="primary" icon="user">详情</Button>
            <Button onClick={() => onClick(record.id)} type="danger" icon="delete">删除</Button>
          </div>
        );
      },
    }
  ];

  return (
    <Card title="角色列表" extra={<a href="">新增</a>}>
      <Table
        dataSource={rolelist}
        columns={columns}
      />
    </Card>
  );
}

RoleList.prototype = {
  rolelist: PropTypes.array.isRequired
};

export default RoleList;
